Vue Js Union of Two Array:  Vue.js is a  JavaScript framework that makes it easy to build dynamic user interfaces. To merge two arrays and get the union of the unique elements, we can use a Set object. First, we define the two arrays that we want to merge. Then, we create a new Set object by using the spread operator (…) to combine the two arrays. The Set object automatically removes any duplicate elements, leaving only the unique elements from both arrays. Finally, we convert the Set object back to an array using the spread operator once again. This gives us an array that contains only the unique elements from both arrays. This approach is simple, efficient, and works well with Vue.js’s reactive programming model.

How to get the union of the unique elements of array in Vue.js?

• First, we define two arrays array1 and array2.
• Then, we create a new Set object by spreading the two arrays using the spread operator (...).
• The Set object automatically removes duplicate elements, so it contains only the unique elements from both arrays.
• We convert the Set object back to an array using the spread operator again.

Vue Js Union of Two Array Example

<div id="app">
    <p>Array 1: {{ array1 }}</p>
    <p>Array 2: {{ array2 }}</p>
    <p>Union Array: {{ unionArray }}</p>
</div>
  <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    array1: [1, 2, 3],
                    array2: [2, 3, 4],
                    unionArray: []
                }
            },
            mounted() {
                this.createUnionArray();
            },
            methods: {
                createUnionArray() {
                    // Create a Set object by concatenating the arrays
                    const set = new Set([...this.array1, ...this.array2]);

                    // Iterate over the Set and push its values to the union array
                    for (let value of set) {
                        this.unionArray.push(value);
                    }
                }
            }
        })
 </script>

Output of above example

How to Perform a Union of Two Arrays of Objects in Vue.js

In this example, we first use the concat method to merge the two arrays into one. Then, we use the filter method to iterate over the merged array and return only the elements that satisfy a certain condition.

Inside the filter method, we use the findIndex method to find the index of the first element in the array that satisfies a certain condition. In this case, the condition is that the id and name properties of the element match those of the current element being filtered.

If the index of the first matching element is equal to the index of the current element being filtered, it means that the current element is not a duplicate, and we return true to include it in the filtered array. If the indexes are different, it means that the current element is a duplicate, and we return false to exclude it from the filtered array.

Finally, we assign the filtered array to the union array, which contains the union of the two original arrays.

Vue Js union of Two Array of Object Example

<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    array1: [
                        { id: 1, name: 'John' },
                        { id: 2, name: 'Mary' },
                        { id: 3, name: 'Tom' }
                    ],
                    array2: [
                        { id: 3, name: 'Tom' },
                        { id: 4, name: 'Lisa' },
                        { id: 5, name: 'Jane' }
                    ],
                    union: []
                }
            },
            mounted() {
                this.getUnion();
            },
            methods: {
                getUnion() {
                    this.union = this.array1.concat(this.array2).filter((item, index, self) => {
                        return index === self.findIndex((t) => (
                            t.id === item.id && t.name === item.name
                        ));
                    });
                }
            }
        })
</script>

Output of Vue Js Union of Two array of Object 

How to Merge and Remove Duplicate Objects from Multiple Arrays in Vue.js Using Spread Operator and Filter() Method

In this example, we define three arrays of objects called array1, array2, and array3. We also define two empty arrays called allObjects and uniqueObjects.

In the mounted() hook, we use the spread operator ... to concatenate the arrays into a single array called allObjects. We then use the filter() method to create a new array called uniqueObjects that contains only unique objects.

In the template, we display the allObjects and uniqueObjects arrays in two separate lists using v-for directives. The key attribute is set to the id property of each object to ensure  Vue can efficiently update the lists when changes occur.

Vue Js Union of Multiple of Array of Object Example

<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    array1: [{ id: 1, name: "John" }, { id: 2, name: "Mary" }, { id: 3, name: "David" }],
                    array2: [{ id: 2, name: "Mary" }, { id: 4, name: "James" }, { id: 5, name: "Anna" }],
                    array3: [{ id: 3, name: "David" }, { id: 5, name: "Anna" }, { id: 6, name: "Lisa" }],
                    allObjects: [],
                    uniqueObjects: []

                }
            },
            mounted() {
                this.allObjects = [...this.array1, ...this.array2, ...this.array3];
                this.uniqueObjects = this.allObjects.filter((item, index) => {
                    const position = this.allObjects.findIndex(obj => obj.id === item.id);
                    return position === index;
                });
            }
        })
</script>

Output of Vue Js Union of Multiple Array of Object